<template>
  <view class="main-box">
    <view class="img-container">
      <image
        style="height: 510rpx; width: 750rpx"
        model="scaleToFill"
        src="/static/images/bgc_01.png"
      ></image>
    </view>
    <view class="containerBody">
      <view class="edit-box">
		      <view style="background-color: #05163e;padding: 20rpx 30rpx 20rpx 30rpx;box-sizing:
              border-box;color: white; display:flex;justify-content:space-between">
              <view>{{form.createTime}}</view>
              <view>{{clerkName}}</view>
          </view>
        <view style="margin: 0 30rpx; ">
          <view class="my-uni-form">
            <view>
              <input
                v-model="form.content1"
                class="uni-input"
                placeholder="工作一最多输入120个字"
                placeholder-style="color:#DBDBDB;"
                maxlength="120"
                
                type="text"
              />
             <!-- <textarea
                v-model="form.describe1"
                class="uni-textarea"
              /> -->
              <cmpVideo
                :fileList="fileList"
                @changeComponentData="changeComponentData"
              />
            </view>
            <view>
              <input
                v-model="form.content2"
                class="uni-input"
                placeholder-style="color:#DBDBDB;"
                placeholder="工作二最多输入120个字"
                maxlength="120"
                type="text"
              />
              <!-- <textarea
                v-model="form.describe2"
                class="uni-textarea"
              /> -->
              <cmpVideo
                :fileList="fileList1"
                @changeComponentData="changeComponent1Data"
              />
            </view>
            <view style="margin-bottom: 140rpx">
              <input
                v-model="form.content3"
                placeholder-style="color:#DBDBDB;"
                class="uni-input"
                placeholder="工作三最多输入个字"
                maxlength="120"
                type="text"
              />
              <!-- <textarea
                v-model="form.describe3"
                class="uni-textarea"
              /> -->
              <cmpVideo
                :fileList="fileList2"
                @changeComponentData="changeComponent2Data"
              />
            </view>
          </view>
        </view>
        <view class="submit-form">
          <u-button
            @click="handleSubmit"
            :customStyle="{
              boxShadow: 'none !important',
              width: '40%',
              borderRadius: '10rpx',
              color: '#FFFFFF',
              border: '1px solid #0C347E',
              background: '#0C347E',
            }"
            >提交</u-button
          >
        </view>
      </view>
    </view>
    <u-modal :show="pupOwnShow" width="690rpx" :showConfirmButton="false">
      <cmpDialog
        @handleClose="() => (pupOwnShow = false)"
        @submitForm="submitOwnForm"
        :dialogData="dialogOwnData"
      />
    </u-modal>
  </view>
</template>
<script>
import cmpDialog from '../../../components/cmp-dialog.vue'
import {
  detailByIdFun,
  getLeaderDailyData,
  setEditDaily,
  setMessageData,
} from '@/service/services.js'
import cmpVideo from '../../../components/cmp-video.vue'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      clerkName:"",
      dailyId: 0,
      imgTypeList: ['png', 'jpg', 'jpeg', 'bmp', 'gif'],
      pupOwnShow: false,
      dialogOwnData: {
        title: '是否对修改内容进行提交？',
        src: '../../../static/images/submint.png',
        btn: {
          ok: '提交',
          close: '暂不',
        },
      },
      viewList: [],
      fileList: [],
      fileList1: [],
      fileList2: [],
      form: {},
      value: '',
      writeDailyData: {
        title: '写日报',
        info: '编辑当日日报',
        count: 200,
      },
      editDailyData: {
        title: '改日报',
        info: '修改文书提交日报',
        count: 4,
      },
    }
  },
  onLoad(option) {
    this.dailyId = option.id
    this.getData({
      id: option.id,
    })
    wx.setVisualEffectOnCapture({
      visualEffect: 'hidden',
    })
  },
  computed: mapState({
    userInfo(item) {
      return item.userInfo
    },
  }),
  // onShow() {
  //   this.getData({
  //     userId: this.userInfo.userId,
  //     flag: 0,
  //   })
  // },
  methods: {
    deleteEndPunctuation(str){
       for(let i=1;i<str.length;i++){
          let lastIndex=  str.charAt(str.length-i) 
          let flag =  lastIndex.replace(/(.*)(，|。|、|！|；|,|;|!)/g ,"") 
            if(flag){       
            return  str.slice(0,str.length-i+1)   
            }
        }
      },
    changeComponentData(data) {
      this.fileList = data
    },
    changeComponent1Data(data) {
      this.fileList1 = data
    },
    changeComponent2Data(data) {
      this.fileList2 = data
    },
    getData(item) {
      this.viewList = []
      detailByIdFun(item).then((res) => {    
        this.clerkName = res.data.clerkName  
        if (res.code === 200 && res.data)
          this.form = {
            id: res.data.id,
            clerkid: res.data.clerkid,
            content1: res.data.content1,
            content2: res.data.content2,
            content3: res.data.content3,
            describe1: res.data.describe1,
            describe2: res.data.describe2,
            describe3: res.data.describe3,
            createTime: res.data.createTime
          }
        if (res.data.file1) {
          if (res.data.file1.indexOf(';', 1) === 1) {
            if (res.data.file1.indexOf('mp4') === -1) {
              this.fileList = [
                {
                  key: Math.random(),
                  fileType: 'png',
                  fileUrl: res.data.file1,
                },
              ]
            } else {
              this.fileList = [
                {
                  key: Math.random(),
                  fileType: 'mp4',
                  fileUrl: res.data.file1,
                },
              ]
            }
          } else {
            const strArr = res.data.file1
              .substring(0, res.data.file1.lastIndexOf(';'))
              .split(';')
            strArr.forEach((info, index) => {
              this.fileList.push({
                key: Math.random(),
                fileType: info.indexOf('mp4') === -1 ? 'png' : 'mp4',
                fileUrl: info,
              })
            })
          }
        }
        if (res.data.file2) {
          if (res.data.file2.indexOf(';', 1) === 1) {
            if (res.data.file2.indexOf('mp4') === -1) {
              this.fileList1 = [
                {
                  key: Math.random(),
                  fileType: 'png',
                  fileUrl: res.data.file2,
                },
              ]
            } else {
              this.fileList1 = [
                {
                  key: Math.random(),
                  fileType: 'mp4',
                  fileUrl: res.data.file2,
                },
              ]
            }
          } else {
            const strArr = res.data.file2
              .substring(0, res.data.file2.lastIndexOf(';'))
              .split(';')
            strArr.forEach((info, index) => {
              this.fileList1.push({
                key: Math.random(),
                fileType: info.indexOf('mp4') === -1 ? 'png' : 'mp4',
                fileUrl: info,
              })
            })
          }
        }
        if (res.data.file3) {
          if (res.data.file3.indexOf(';', 1) === 1) {
            if (res.data.file3.indexOf('mp4') === -1) {
              this.fileList2 = [
                {
                  key: Math.random(),
                  fileType: 'png',
                  fileUrl: res.data.file3,
                },
              ]
            } else {
              this.fileList2 = [
                {
                  key: Math.random(),
                  fileType: 'mp4',
                  fileUrl: res.data.file3,
                },
              ]
            }
          } else {
            const strArr = res.data.file3
              .substring(0, res.data.file3.lastIndexOf(';'))
              .split(';')
            strArr.forEach((info, index) => {
              this.fileList2.push({
                key: Math.random(),
                fileType: info.indexOf('mp4') === -1 ? 'png' : 'mp4',
                fileUrl: info,
              })
            })
          }
        }
        this.viewList.push({
          id: res.dataid,
          userName: res.datauserName,
          createTime: res.datacreateTime,
          checked: false,
          Content: [
            {
              key: Math.random() + res.datacontent1,
              info: res.datacontent1,
              describe1: res.datadescribe1,
              imgUrl: [],
            },
            {
              key: Math.random() + res.datacontent2,
              info: res.datacontent2,
              describe2: res.datadescribe2,
              imgUrl: [],
            },
            {
              key: Math.random() + res.datacontent3,
              info: res.datacontent3,
              describe3: res.datadescribe3,
              imgUrl: [],
            },
          ],
        })
        if (res.datafile1) {
          if (res.datafile1.indexOf(';', index + 1) === 1) {
            if (res.datafile1.indexOf('mp4') === -1) {
              this.viewList = [
                {
                  key: Math.random(),
                  fileType: 'png',
                  fileUrl: res.datafile1,
                },
              ]
            } else {
              this.viewList = [
                {
                  key: Math.random(),
                  fileType: 'mp4',
                  fileUrl: res.datafile1,
                },
              ]
            }
          } else {
            const strArr = res.datafile1
              .substring(0, res.datafile1.lastIndexOf(';'))
              .split(';')
            strArr.forEach((info, index) => {
              this.viewList.push({
                key: Math.random(),
                fileType: info.indexOf('mp4') === -1 ? 'png' : 'mp4',
                fileUrl: info,
              })
            })
          }
        }
        if (res.datafile2) {
          if (res.datafile2.indexOf(';', index + 1) === 1) {
            if (res.datafile2.indexOf('mp4') === -1) {
              this.viewList = [
                {
                  key: Math.random(),
                  fileType: 'png',
                  fileUrl: res.datafile2,
                },
              ]
            } else {
              this.viewList = [
                {
                  key: Math.random(),
                  fileType: 'mp4',
                  fileUrl: res.datafile2,
                },
              ]
            }
          } else {
            const strArr = res.datafile2
              .substring(0, res.datafile2.lastIndexOf(';'))
              .split(';')
            strArr.forEach((info, index) => {
              this.viewList.push({
                key: Math.random(),
                fileType: info.indexOf('mp4') === -1 ? 'png' : 'mp4',
                fileUrl: info,
              })
            })
          }
        }
        if (res.datafile3) {
          if (res.datafile3.indexOf(';', index + 1) === 1) {
            if (res.datafile3.indexOf('mp4') === -1) {
              this.viewList = [
                {
                  key: Math.random(),
                  fileType: 'png',
                  fileUrl: res.datafile3,
                },
              ]
            } else {
              this.viewList = [
                {
                  key: Math.random(),
                  fileType: 'mp4',
                  fileUrl: res.datafile3,
                },
              ]
            }
          } else {
            const strArr = res.datafile3
              .substring(0, res.datafile3.lastIndexOf(';'))
              .split(';')
            strArr.forEach((info, index) => {
              this.viewList.push({
                key: Math.random(),
                fileType: info.indexOf('mp4') === -1 ? 'png' : 'mp4',
                fileUrl: info,
              })
            })
          }
        }
      })
    },
    handleOwnClose() {
      this.pupOwnShow = false
    },
    submitOwnForm() {
      this.form.id = this.dailyId
      this.form.leaderid = this.userInfo.userId
      this.form.status = 0
      this.form.file1 = ''
      this.form.file2 = ''
      this.form.file3 = ''
        if(this.form.content1){
          this.form.content1 = this.deleteEndPunctuation(this.form.content1)
       }
      if(this.form.content2){
         this.form.content2 =this.deleteEndPunctuation(this.form.content2)
       }
      if(this.form.content3){
          this.form.content3 =this.deleteEndPunctuation(this.form.content3)
       }
      if (this.fileList.length > 0) {
        this.fileList.forEach((item) => {
          this.form.file1 += item.fileUrl + ';'
        })
      }
      if (this.fileList1.length > 0) {
        this.fileList1.forEach((item) => {
          this.form.file2 += item.fileUrl + ';'
        })
      }
      if (this.fileList2.length > 0) {
        this.fileList2.forEach((item) => {
          this.form.file3 += item.fileUrl + ';'
        })
      }
      setEditDaily(this.form)
        .then((res) => {        
          this.pupOwnShow = false
          setMessageData({
            type: 1,
            leaderid: this.userInfo.userId,
          })
          uni.showToast({
            title: '已处理',
            type: 'default',
            position: 'bottom',
            icon: 'none',
            position: 'center',
            mask: true,
            duration: 3000,
          })
          setTimeout(() => {
            this.pupOwnShow = false
            let pages = getCurrentPages() //页面栈
            let prePage = pages[pages.length - 2] //上一页
            prePage.$vm.reFresh = Math.random() //触发上一页监听器
            uni.navigateBack() //返回上一页
          }, 3000)
        })
        .catch(() => {
          this.pupOwnShow = false
        })
    },
    handleSubmit() {         
         if (!this.form.content1){
                  uni.showToast({
                      title: '工作一内容不能为空',
                      type: 'default',                   
                      icon: 'none',
                      position: 'center',
                      mask: true,
                      duration: 2000,
                 })
                return
         }   
      this.pupOwnShow = true
    },
  },
  components: {
    cmpDialog,
    cmpVideo,
  },
}
</script>

<style lang="scss" scoped>
.edit-box {
  flex: 1;
  z-index: 2;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 32rpx;
  box-sizing: border-box;
  z-index: 2;
  box-shadow: 0px 6rpx 6rpx 0rpx #c5adae;
  border-radius: 20rpx;
  background: #fff;
  overflow: hidden;
  margin-top: 20rpx;
}
.main-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
}
.img-container {
  position: fixed;
  width: 100%;
}
.containerBody {
  .content {
    display: flex;
    flex: 1;
    justify-content: space-between;
    position: relative;
  }
  .warning-time {
    height: 100rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: 400;
    color: #606c81;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .time {
    font-size: 48rpx;
    font-weight: bold;
    color: #14bfb1;
    margin: 0px 8rpx;
  }
  position: relative;
  flex: 1;
}
.bottomImg {
  height: 126rpx;
  border-radius: 10rpx;
  position: absolute;
  bottom: -6rpx;
  width: 100%;
}
.submit-form {
  bottom: 30rpx;
  display: flex;
  width: 100%;
  position: absolute;
}
.containerBody {
  position: relative;
  flex: 1;
  margin: 0rpx 24rpx 0rpx 24rpx;
  box-sizing: border-box;
  z-index: 2;
  display: flex;
}
</style>
